<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-form-item label="商品号">
              <el-input v-model="params.itemNbr" placeholder="输入商品号搜索" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="条码">
              <el-input v-model="params.upcNbrs" placeholder="多个条码用逗号分隔" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="供应商号">
              <el-input v-model="params.vendorNbr" placeholder="输入供应商号搜索" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="供应商名称">
              <el-input v-model="params.vendorName" placeholder="输入供应商名称模糊匹配" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="提交人ID">
              <el-input v-model="params.submitUserId" placeholder="输入提交人ID搜索" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="params.deptNbrs" placeholder="多部门号查询用逗号分隔" clearable size="mini" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="资质文件">
              <el-select v-model="params.cerFlag" placeholder="选择搜索" clearable size="mini" style="width: 200px">
                <el-option key="1" label="有资质文件" value="1" />
                <el-option key="0" label="无资质文件" value="0" />
                <el-option key="-1" label="空" value="-1" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否已阅">
              <el-select v-model="params.mdaReadTag" placeholder="选择搜索" clearable size="mini" style="width: 200px">
                <el-option key="Y" label="已阅" value="Y" />
                <el-option key="N" label="未读" value="N" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <div style="float:right;">
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" icon="el-icon-edit" round @click="doClearSelection">取消选择</el-button>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" icon="el-icon-s-check" round @click="batchSetReadTag">标记已阅</el-button>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" icon="el-icon-s-promotion" round @click="doSendEmail">发送邮件</el-button>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" icon="el-icon-circle-check" round @click="batchAgree">批量同意</el-button>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" icon="el-icon-circle-close" round @click="batchReject">批量驳回</el-button>
      </div>
      <el-table
        ref="itemTab"
        :data="data"
        :row-key="getRowKeys"
        size="small"
        border
        style="width: 100%;"
        :row-class-name="tableRowClassName"
        @header-dragend="colChange"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="部门" prop="deptNbr" :width="colWidths.deptNbr" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="商品号" prop="itemNbr" :width="colWidths.itemNbr" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="状态" prop="itemStatusCode" :width="colWidths.itemStatusCode" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商号" prop="vendorNbr" :width="colWidths.vendorNbr" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商名称" prop="vendorName" :width="colWidths.vendorName" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="条码" prop="upcNbr" :width="colWidths.upcNbr" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_条码" prop="chgUpcNbr" :width="colWidths.chgUpcNbr">
          <template slot-scope="scope">
            <span v-if="scope.row.chgUpcNbr" style="color:#fc1111">{{ scope.row.chgUpcNbr }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="商品说明1" prop="item1Desc" :width="colWidths.item1Desc" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_商品说明1" prop="chgItem1Desc" :width="colWidths.chgItem1Desc">
          <template slot-scope="scope">
            <span v-if="scope.row.chgItem1Desc" style="color:#fc1111">{{ scope.row.chgItem1Desc }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="商品长说明" prop="item1DescLength" :width="colWidths.item1DescLength" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_商品长说明" prop="chgItem1DescLength" :width="colWidths.chgItem1DescLength">
          <template slot-scope="scope">
            <span v-if="scope.row.chgItem1DescLength" style="color:#fc1111">{{ scope.row.chgItem1DescLength }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="货架2/规格" prop="shlflbl2SizeDesc" :width="colWidths.shlflbl2SizeDesc" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_货架2/规格" prop="chgShlflbl2SizeDesc" :width="colWidths.chgShlflbl2SizeDesc">
          <template slot-scope="scope">
            <span v-if="scope.row.chgShlflbl2SizeDesc" style="color:#fc1111">{{ scope.row.chgShlflbl2SizeDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="规格型号" prop="shlflbl3SizeDesc" :width="colWidths.shlflbl3SizeDesc" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_规格型号" prop="chgShlflbl3SizeDesc" :width="colWidths.chgShlflbl3SizeDesc">
          <template slot-scope="scope">
            <span v-if="scope.row.chgShlflbl3SizeDesc" style="color:#fc1111">{{ scope.row.chgShlflbl3SizeDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="产地" prop="mdsDesc" :width="colWidths.mdsDesc" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_产地" prop="chgMdsDesc" :width="colWidths.chgMdsDesc">
          <template slot-scope="scope">
            <span v-if="scope.row.chgMdsDesc" style="color:#fc1111">{{ scope.row.chgMdsDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="配色配码" prop="colorMatch" :width="colWidths.colorMatch" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_配色配码" prop="chgColorMatch" :width="colWidths.chgColorMatch">
          <template slot-scope="scope">
            <span v-if="scope.row.chgColorMatch" style="color:#fc1111">{{ scope.row.chgColorMatch }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商之商品代码" prop="vendorStockId" :width="colWidths.vendorStockId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="CHG_供应商之商品代码" prop="chgVendorStockId" :width="colWidths.chgVendorStockId">
          <template slot-scope="scope">
            <span v-if="scope.row.chgVendorStockId" style="color:#fc1111">{{ scope.row.chgVendorStockId }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="提交人ID" prop="submitUserId" :width="colWidths.submitUserId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="提交时间" prop="updatedTime" :width="colWidths.updatedTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatedTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10,50,100,500]"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <emailForm ref="emailForm" :parent="parent" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { Message } from 'element-ui'
import initData from '@/utils/initData'
import { batchMDAAuditAgree, batchMDAAuditReject, setMDAReadTag } from '@/api/change-item'
import emailForm from '@/views/mda/emailForm'

export default {
  components: { emailForm },
  mixins: [initData],
  data() {
    return {
      ids: [],
      loading: false,
      changeType: 1,
      parent: this,
      items: [],
      activeName: '1'
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = '/change-item/mdaAuditList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      this.params.changeType = this.changeType
      return true
    },
    // 列表排序触发
    sortChange(val) {
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = val.prop + sortType
      this.init()
    },
    // 查询
    toQuery() {
      if (this.params.upcNbrs) {
        this.params.upcNbrs = this.params.upcNbrs.replaceAll('，', ',')
      }
      if (this.params.deptNbrs) {
        this.params.deptNbrs = this.params.deptNbrs.replaceAll('，', ',')
      }

      this.page = 0
      this.currentPage = 1
      this.init()
      this.doClearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      this.items = []
      val.forEach(item => {
        this.ids.push(item.id)
        this.items.push(item)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 清空选择项
    doClearSelection() {
      this.$refs.itemTab.clearSelection()
    },
    // 批量同意触发
    batchAgree() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要审核的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$confirm('确认审核通过选择的 ' + this.ids.length + ' 条item信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          batchMDAAuditAgree(this.ids).then(res => {
            this.toQuery()
            Message({
              message: '审核完成。',
              type: 'success',
              duration: 3 * 1000
            })
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    },
    // 批量审核驳回
    batchReject() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要审核的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$prompt('请输入驳回原因', '驳回 ' + this.ids.length + ' 条Item', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: this.rejectRemarkValidator,
          type: 'warning'
        }).then((rejectRemark) => {
          this.loading = true
          batchMDAAuditReject(this.ids, this.changeType, rejectRemark.value).then(res => {
            this.toQuery()
            Message({
              message: '审核完成。',
              type: 'success',
              duration: 3 * 1000
            })
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    },
    rejectRemarkValidator(val) {
      if (!val) {
        return '请填写驳回原因'
      } else if (val.length > 500) {
        return '驳回原因长度为1-500'
      }
      return true
    },
    // 发送邮件触发
    doSendEmail() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要发送邮件的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$refs.emailForm.changeType = this.changeType
        this.$refs.emailForm.dialog = true
      }
    },
    // 批量设置阅读标记
    batchSetReadTag() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要标记的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.loading = true
        setMDAReadTag(this.ids).then(res => {
          this.toQuery()
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      }
    },
    // 行渲染
    tableRowClassName({ row, rowIndex }) {
      if (row.mdaReadTag) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
